<template>
  <div class="home">
    <div class="silder">
      <el-carousel indicator-position="outside" height='353px'>
        <el-carousel-item v-for="(item,index) in images" :key="index">
          <img v-lazy="item.src" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="contentBox">
      <div class="topTitle">BEST SELL SHOP</div>
      <div class="contetnWrp">
        <order-item v-for="(item,index) in 30" :key="index" :item="item"/>
      </div>
      <div class="progress">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="1000">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import {mapMutations, mapGetters} from 'vuex'
  import orderItem from './orderItem'

  export default {
    metaInfo: {
      meta: [
        {                 // set meta
          name: 'keyWords',
          content: 'Shop Meet50off'
        },
        {
          name: 'og:url',
          content: 'https://test.meet50off.com'
        }
      ]
    },
    components: {orderItem},
    data() {
      return {
        //分类图
        imgList: [
          {classurl: '../../../static/img/clothes.png', name: '1'},
          {classurl: '../../../static/img/Healthy.png', name: '2'},
          {classurl: '../../../static/img/Computer.png', name: '3'},
          {classurl: '../../../static/img/Park.png', name: '4'},
          {classurl: '../../../static/img/motion.png', name: '5'},
          {classurl: '../../../static/img/Toys.png', name: '6'},
          {classurl: '../../../static/img/PetSupplies.png', name: '7'},
        ],
        //轮播图
        images: [
          {src: require('../../../static/img/lunbo1.jpg'), name: '1'},
          {src: require('../../../static/img/lunbo1.jpg'), name: '2'},
        ],
      }
    },
    created() {

    },
    methods: {},
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  /*@import "~common/stylus/variable"*/
  /*@import "~common/stylus/index"*/
  .home {
    display: flex
    flex-direction: column
    align-items center
    width: 100%
    min-height: 400px
    padding: 25px 0

    .silder {
      width: 100%
      height: 353px

      .el-carousel__item {
        height: 100%
      }
    }

    .contentBox {
      width: 100%
      display: flex
      flex-direction: column
      align-items: center
      border-top: 1px solid #EFEFEF
      margin-top: 65px

      .topTitle {
        height: 86px
        line-height: 86px

      }

      .contetnWrp {
        width: 100%
        display: flex
        flex-wrap: wrap

      }

      .progress {
      }
    }

  }
</style>
